<template>
  <aside class="sidebar">
    <div class="menu">
      <router-link to="/dashboard" class="menu-item">
        <i class="fas fa-home"></i>
        <span>仪表盘</span>
      </router-link>
      <router-link to="/courses" class="menu-item">
        <i class="fas fa-book"></i>
        <span>课程中心</span>
      </router-link>
      <router-link to="/homework" class="menu-item">
        <i class="fas fa-tasks"></i>
        <span>作业管理</span>
      </router-link>
      <router-link to="/chat" class="menu-item">
        <i class="fas fa-comments"></i>
        <span>在线交流</span>
      </router-link>
      
      <!-- 教师特有功能 -->
      <template v-if="isTeacher">
        <div class="menu-divider"></div>
        <router-link to="/teacher/courses" class="menu-item">
          <i class="fas fa-chalkboard-teacher"></i>
          <span>课程管理</span>
        </router-link>
        <router-link to="/teacher/homework" class="menu-item">
          <i class="fas fa-clipboard-check"></i>
          <span>作业批改</span>
        </router-link>
      </template>

      <!-- 学生特有功能 -->
      <template v-if="isStudent">
        <div class="menu-divider"></div>
        <router-link to="/student/progress" class="menu-item">
          <i class="fas fa-chart-line"></i>
          <span>学习进度</span>
        </router-link>
        <router-link to="/student/grades" class="menu-item">
          <i class="fas fa-star"></i>
          <span>成绩查询</span>
        </router-link>
      </template>
    </div>
  </aside>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAuthStore } from '../../stores/auth.store'

const authStore = useAuthStore()
const isTeacher = computed(() => authStore.user?.role === 'teacher')
const isStudent = computed(() => authStore.user?.role === 'student')
</script>

<style scoped lang="scss">
.sidebar {
  height: 100%;
  background-color: #001529;
  color: #fff;
  padding: 20px 0;

  .menu {
    display: flex;
    flex-direction: column;
    gap: 4px;

    .menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 24px;
      color: rgba(255, 255, 255, 0.65);
      text-decoration: none;
      transition: all 0.3s;

      i {
        font-size: 1.1rem;
        width: 20px;
        text-align: center;
      }

      &:hover {
        color: #fff;
        background-color: #1890ff;
      }

      &.router-link-active {
        color: #fff;
        background-color: #1890ff;
      }
    }

    .menu-divider {
      height: 1px;
      background-color: rgba(255, 255, 255, 0.1);
      margin: 8px 0;
    }
  }
}
</style>